
<template>
    <div ref="back" class="joystickBackground">
        <div ref="handler" class="joystickHandler"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { BaseJoystick } from "../assets/BaseJoystick";

export default defineComponent({
    name: "Joystick",
    props: {
    },
    data() {
        var baseCtl = new BaseJoystick();
        baseCtl.onmove = (dir) => {
            this.$emit("onmove", dir);
        };
        baseCtl.onmoveend = () => {
            this.$emit("onmoveend");
        };
        var back: HTMLElement | undefined;
        var handler: HTMLElement | undefined;

        var touchstartHandler: any;
        var touchmoveHandler: any;
        var touchendHandler: any;
        return {
            baseCtl,
            back,
            handler,

            touchstartHandler,
            touchmoveHandler,
            touchendHandler,
        };
    },
    emits: {
        onmove: null,
        onmoveend: null,
    },
    components: {
    },
    methods: {
        touchStart(event: TouchEvent) {
            if (event.touches.length <= 0) return;
            this.baseCtl.touchStart(event.touches[0].clientX, event.touches[0].clientY);
            return false;
        },
        touchMove(event: TouchEvent) {
            if (event.touches.length <= 0) {
                this.touchEnd();
                return null;
            }
            event.preventDefault();
            event.stopPropagation();
            var pos = this.baseCtl.touchMove(event.touches[0].clientX, event.touches[0].clientY);
            if (!pos) return false;
            if (this.handler) this.handler.style.left = pos.left + "px";
            if (this.handler) this.handler.style.top = pos.top + "px";
            return false;
        },
        touchEnd() {
            var pos = this.baseCtl.touchEnd();
            if (!pos) return false;
            if (this.handler) this.handler.style.left = pos.left + "px";
            if (this.handler) this.handler.style.top = pos.top + "px";
            return false;
        },
    },
    mounted() {
        this.back = this.$refs.back as HTMLElement;
        this.handler = this.$refs.handler as HTMLElement;
        this.baseCtl.initUISize(this.back.offsetWidth, this.handler.offsetWidth);

        this.touchstartHandler = this.touchStart.bind(this);
        this.touchmoveHandler = this.touchMove.bind(this);
        this.touchendHandler = this.touchEnd.bind(this);
        this.back.addEventListener('touchstart', this.touchstartHandler, false);
        this.back.addEventListener('touchmove', this.touchmoveHandler, false);
        document.addEventListener('touchend', this.touchendHandler, false);
        document.addEventListener('touchcancel', this.touchendHandler, false);
    },
    beforeUnmount() {
        if (this.back) {
            this.back.removeEventListener('touchstart', this.touchstartHandler, false);
            this.back.removeEventListener('touchmove', this.touchmoveHandler, false);
        }
        document.removeEventListener('touchend', this.touchendHandler, false);
        document.removeEventListener('touchcancel', this.touchendHandler, false);
    },
});

</script>